import React from 'react';
import store from '../myRedux/store.js';
import { todoListAddItem } from '../actionsCreator/todoList.js';
import * as arr from '../actionsCreator/todoList.js'
import { bindActionCreators } from '../myRedux/myRedux.js';
class TodoList extends React.Component {
    state = {
        data: store.getState().todoList
    }

    componentDidMount () {
        let unScr = store.subscribe(() => {
            this.setState({
                data: store.getState().todoList
            })
        })
    }

    handlerCilck = (e) => {
        e.preventDefault();
        console.log('o jb k');
    }
    handlerChangeVal = (e) => {
        const action = {
            type: 'CHANGE_VALUE',
            value: e.target.value,
            dispatch: store.dispatch
        }
        store.dispatch(action);
    }
    add = () => {
        const action = todoListAddItem();
        store.dispatch(action);
    }
    render () {
        let obj = bindActionCreators(arr, store.dispatch);
        console.log(obj)
        return(
            <div>
                <form onSubmit={ this.handlerCilck }>
                    <input required value={this.state.data.value} onChange={this.handlerChangeVal} placeholder="请输入内容" type="text" />
                    <button onClick={ this.add }> add </button>
                </form>
                {
                    this.state.data.list.map((item, index) => {
                        return(
                                <p key={ index }> {item} </p>
                            )
                    })
                }
            </div>
            )
    }
}

export default TodoList;